<template>
  <div class="time-stats">
    <div class="time-item">
      <div class="time-title">当前用时</div>
      <div class="time-value">{{ currentMinutes }}分{{ currentSeconds }}秒</div>
      <div class="time-rate">
        <span class="rate-text">{{ currentRate }}</span>
        <img :src="require('@/../public/assets/huo.png')" alt="火" class="rate-icon">
        <span class="rate-text">/ 分钟</span>
      </div>
      <div class="time-profit">
        <span class="profit-text">当前收益: {{ formatProfit(currentProfit) }}</span>
        <img :src="require('@/../public/assets/huo.png')" alt="火" class="rate-icon">
      </div>
    </div>
    <div class="time-item">
      <div class="time-title">累计用时</div>
      <div class="time-value">{{ totalMinutes }}分{{ totalSeconds }}秒</div>
      <div class="time-rate">
        <span class="rate-text">{{ totalRate }}</span>
        <img :src="require('@/../public/assets/huo.png')" alt="火" class="rate-icon">
        <span class="rate-text">/ 分钟</span>
      </div>
      <div class="time-profit">
        <span class="profit-text">累计收益: {{ formatProfit(totalProfit) }}</span>
        <img :src="require('@/../public/assets/huo.png')" alt="火" class="rate-icon">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    currentMinutes: Number,
    currentSeconds: Number,
    currentRate: String,
    currentProfit: Number,
    totalMinutes: Number,
    totalSeconds: Number,
    totalRate: String,
    totalProfit: Number
  },
  methods: {
    formatProfit(value) {
      // 确保 value 是数字，避免 toFixed 报错
      return typeof value === 'number' ? value.toFixed(3) : '0.000';
    }
  }
}
</script>

<style scoped>
.time-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  height: 100px;
  flex-shrink: 0;
}

.time-item {
  flex: 1;
  background: white;
  border-radius: 6px;
  padding: 12px;
  margin: 0 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.time-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
  line-height: 1.2;
}

.time-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
  line-height: 1.2;
}

.time-rate {
  font-size: 12px;
  color: #67C23A;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
  margin-bottom: 4px;
}

.time-profit {
  font-size: 12px;
  color: #E6A23C;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}

.profit-text {
  font-weight: 500;
}

.rate-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.rate-text {
  line-height: 1;
}
</style>